<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="../js/17/react.development.js"></script>
    <script type="text/javascript" src="../js/17/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/17/babel.min.js"></script>
    <script type="text/babel">
    class Test extends React.Component {

        constructor(props) {
            console.log('constructor');
            super(props);
            this.state = {
                count: 0,
            }
        }

        add = () => {
            console.log('点击+1');
            let {count} = this.state;
            this.setState({
                count: ++count,
            });
        }

        death = () => {
            console.log('卸载组件');
            // 卸载组件-删除指定节点
            ReactDOM.unmountComponentAtNode(document.querySelector('#app'));
        }

        force = () => {
            console.log('强制更新');
            this.forceUpdate();
        }

        // 组件挂载前
        UNSAFE_componentWillMount() {
            console.log('componentWillMount');
        }

        // 组件挂载完成
        componentDidMount() {
            console.log('componentDidMount');
        }

        // 组件卸载前
        UNSAFE_componentWillUnmount() {
            console.log('componentWillUnmount');
        }

        // 询问是否可以更新：若没有调用，则默认返回true，若手动返回false，则不更新
        shouldComponentUpdate() {
            console.log('shouldComponentUpdate');
            return false;
        }

        // 更新前
        UNSAFE_componentWillUpdate() {
            console.log('componentWillUpdate');
        }

        // 更新后
        componentDidUpdate() {
            console.log('componentDidUpdate');
        }
        
        render() {
            console.log('render');
            return (
                <div>
                    <h2>count:{this.state.count}</h2>
                    <button onClick={this.add}>+1</button>&nbsp;
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>强制更新</button>
                </div>
            )
        }
    }
    // 测试父组件render
    class A extends React.Component {
        state = {
            carName: '奔驰',
        }
        changeCar = () => {
            this.setState({
                carName: '奥迪'
            })
        }
        render() {
            return (
                <div>
                    A组件：
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }
    class B extends React.Component {
        // 接收props前，第一次不调用，props更新调用
        componentWillReceiveProps() {
            console.log('B--componentWillReceiveProps');
        }
        shouldComponentUpdate() {
            console.log('B--shouldComponentUpdate');
            return true;
        }

        // 更新前
        componentWillUpdate() {
            console.log('B--componentWillUpdate');
        }

        // 更新后
        componentDidUpdate() {
            console.log('B--componentDidUpdate');
        }
        render() {
            console.log('B--render');
           return (
            <div>B组件：车名字{this.props.carName}</div>
           )
        }

    }
    // 渲染dom
    ReactDOM.render(<A />, document.getElementById('app'))
    </script>

</body>
</html>